<template>
  <div class="user_invoice_box" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="edit_box">
      <div class="title_box">发票抬头<span>抬头每种类型最多添加十个</span></div>
      <div class="tab_infos_changs">
        <div class="case_tab_name" :class="{'active_tab':type==1}" @click="chang_tabs(1)">个人</div>
        <div class="lines"></div>
        <div class="case_tab_name" :class="{'active_tab':type===2}" @click="chang_tabs(2)">企业（普票）</div>
        <div class="lines"></div>
        <div class="case_tab_name" :class="{'active_tab':type==3}" @click="chang_tabs(3)">企业（专票）</div>
        <div class="lines"></div>
        <div class="case_tab_name" :class="{'active_tab':type==4}" @click="chang_tabs(4)">企业（电子普票）</div>
      </div>
      <div class="content_box_infos_tabcar">
        <div class="tab_infos_input">
          <div class="titles">{{ type == 1 ? '发票抬头：' : '单位名称：' }}</div>
          <input v-model="parmaData.title" :placeholder="type == 1 ? '请输入发票抬头：' : '请输入单位名称：'"/>
        </div>
        <template v-if="type != 1">
          <div class="tab_infos_input">
            <div class="titles">税号：</div>
            <input v-model="parmaData.code" placeholder="请输入纳税人识别号"/>
          </div>
          <div class="tab_infos_input">
            <div class="titles">注册地址：</div>
            <input v-model="parmaData.register_address" placeholder="请输入注册地址"/>
          </div>
          <div class="tab_infos_input">
            <div class="titles">开户银行：</div>
            <input v-model="parmaData.bank_name" placeholder="请输入开户银行"/>
          </div>
          <div class="tab_infos_input">
            <div class="titles">银行账号：</div>
            <input v-model="parmaData.bank_code" placeholder="请输入银行账号"/>
          </div>
          <div class="tab_infos_input">
            <div class="titles">注册电话：</div>
            <input v-model="parmaData.register_tel" placeholder="请输入注册电话"/>
          </div>
        </template>
        <div class="tab_infos_input" v-if="type == 1 || type == 4">
          <div class="titles">邮箱：</div>
          <input v-model="parmaData.email" placeholder="请输入邮箱"/>
        </div>
        <div class="tab_infos_input" style="align-items: flex-start">
          <div class="titles">收票地址：</div>
          <textarea v-model="parmaData.address" placeholder="请输入收票详细地址，收票人姓名及联系电话"/>
        </div>
      </div>
      <div class="save_infos" @click="userSaveInvoice">保存</div>
    </div>
    <div class="box_invoice_box">
      <div class="invoice_list_info_tab">
        <template v-if="invoiceList.length">
          <div v-for="(item,index) in invoiceList" :key="index" class="box_infos">
            <div :class="{'active_one':item.type==1}" class="box_names" >
              <div class="box_items_inof">
                <div class="title">{{ item.type == 1 ? '发票抬头：' : '单位名称：' }}</div>
                <div class="contents">{{ item.title }}</div>
              </div>
              <template v-if="item.type!=1">
                <div class="box_items_inof">
                  <div class="title">税号：</div>
                  <div class="contents">{{ item.code }}</div>
                </div>
                <div class="box_items_inof">
                  <div class="title">注册地址：</div>
                  <div class="contents">{{ item.register_address }}</div>
                </div>
                <div class="box_items_inof">
                  <div class="title">开户银行：</div>
                  <div class="contents">{{ item.bank_name }}</div>
                </div>
                <div class="box_items_inof">
                  <div class="title">银行账号：</div>
                  <div class="contents">{{ item.bank_code }}</div>
                </div>
                <div class="box_items_inof">
                  <div class="title">注册电话：</div>
                  <div class="contents">{{ item.register_tel }}</div>
                </div>
              </template>
              <div class="box_items_inof" v-if="item.type==1 || item.type==4">
                <div class="title">邮箱：</div>
                <div class="contents">{{ item.email }}</div>
              </div>
              <div class="box_items_inof" style="margin-bottom: 0">
                <div class="title">收票地址：</div>
                <div class="contents">{{ item.address }}</div>
              </div>
            </div>
            <div class="box_chang_box">
              <div class="delect" @click="DeleteInvoice(item.id)" style="color: #B11E24">删除</div>
              <div class="line_outer"></div>
              <div class="edit_invoe" @click="editIncoice(item)" >编辑</div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <transition name="slide-fade">
      <div class="city_location_box" v-if="invoiceInfoFromShow">
        <div class="location_box">
          <div class="tips_title">编辑发票抬头</div>
          <div class="line"></div>
          <img @click="invoiceInfoFromShow=false" src="../../../assets/window-icon-close-black.png" class="close">
          <div class="content_box_infos_tabcar">
            <div class="tab_infos_input">
              <div class="titles">{{ type == 1 ? '发票抬头：' : '单位名称：' }}</div>
              <input v-model="editParmaData.title" :placeholder="type == 1 ? '请输入发票抬头：' : '请输入单位名称：'"/>
            </div>
            <template v-if="type != 1">
              <div class="tab_infos_input">
                <div class="titles">税号：</div>
                <input v-model="editParmaData.code" placeholder="请输入纳税人识别号"/>
              </div>
              <div class="tab_infos_input">
                <div class="titles">注册地址：</div>
                <input v-model="editParmaData.register_address" placeholder="请输入注册地址"/>
              </div>
              <div class="tab_infos_input">
                <div class="titles">开户银行：</div>
                <input v-model="editParmaData.bank_name" placeholder="请输入开户银行"/>
              </div>
              <div class="tab_infos_input">
                <div class="titles">银行账号：</div>
                <input v-model="editParmaData.bank_code" placeholder="请输入银行账号"/>
              </div>
              <div class="tab_infos_input">
                <div class="titles">注册电话：</div>
                <input v-model="editParmaData.register_tel" placeholder="请输入注册电话"/>
              </div>
            </template>
            <div class="tab_infos_input" v-if="type == 1 || type == 4">
              <div class="titles">邮箱：</div>
              <input v-model="editParmaData.email" placeholder="请输入邮箱"/>
            </div>
            <div class="tab_infos_input" style="align-items: flex-start">
              <div class="titles">收票地址：</div>
              <textarea v-model="editParmaData.address" placeholder="请输入收票详细地址，收票人姓名及联系电话"/>
            </div>
          </div>
          <div class="tips_btn">
            <div @click="invoiceInfoFromShow=false">取消</div>
            <div @click="userSaveInvoice(1)">确认</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {getInvoiceList, saveInvoice, deleteInvoice} from "@/api/apis";

export default {
  name: "userInvoice",
  data(){
    return{
      type:1,
      parmaData: {
        type: '',
        title: '',
        code: '',
        register_address: '',
        bank_name: '',
        bank_code: '',
        register_tel: '',
        address: '',
        email: ''
      },
      invoiceList:[],
      invoiceInfoFromShow:false,
      editParmaData:{},
      fullscreenLoading:false
    }
  },
  mounted() {
    this.GetTypeInvoiceList()
  },
  methods:{
    DeleteInvoice(e) {
      let data = {id: e}
      this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteInvoice(data).then(res => {
          this.$message.success('操作成功')
          this.GetTypeInvoiceList()
        })
      }).catch(() => {

      });
    },
    editIncoice(e){
      this.fullscreenLoading = true
      this.editParmaData = e
      setTimeout(()=>{
        this.fullscreenLoading = false
        this.invoiceInfoFromShow = true
      },500)
    },
    userSaveInvoice(e) {
      let data = {}
      this.parmaData.type = this.type
      this.editParmaData.type = this.type
      if(e==1){
        data = this.editParmaData
      }else {
        data = this.parmaData
      }
      saveInvoice(data).then(res => {
        this.$message.success('添加成功')
        this.invoiceInfoFromShow = false
        this.GetTypeInvoiceList()
        this.editParmaData = {
          type: '',
          title: '',
          code: '',
          register_address: '',
          bank_name: '',
          bank_code: '',
          register_tel: '',
          address: '',
          email: ''
        }
        this.parmaData = {
          type: '',
          title: '',
          code: '',
          register_address: '',
          bank_name: '',
          bank_code: '',
          register_tel: '',
          address: '',
          email: ''
        }
      })
    },
    //发票
    GetTypeInvoiceList() {
      let data = {type: this.type}
      getInvoiceList(data).then(res => {
        this.invoiceList = res.data
      })
    },
    chang_tabs(e) {
      this.type = e
      this.GetTypeInvoiceList()
    },
  }
}
</script>

<style scoped lang="less">
  .user_invoice_box{
    .edit_box{
      margin-bottom: 30px;
      .title_box {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #000000;
        margin-bottom: 19px;

        span {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          margin-left: 9px;

          label {
            color: #B11E24;
          }
        }
      }
      .tab_infos_changs {
        display: flex;
        align-items: center;
        margin-bottom: 28px;
        .case_tab_name {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
        }
        .lines {
          width: 0px;
          height: 16px;
          border-right: 1px solid #000000;
          margin: 0 20px;
        }
        .active_tab {
          color: #B11E24;
        }
      }
      .content_box_infos_tabcar{
        width: auto;
        .tab_infos_input{
          input,textarea{
            width: 229px;
          }
        }
      }
      .save_infos {
        margin-top: 10px;
        width: 98px;
        height: 30px;
        background: #B11E24;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 30px;
        color: #FFFFFF;
        margin-left: 80px;
        text-align: center;
      }
    }
    .box_invoice_box{
      .invoice_list_info_tab {
        display: flex;
        flex-wrap: wrap;
        .box_infos{
          margin-right: 20px;
        }
        .box_names {
          width: calc(280px - 42px);
          background: #FFFFFF;
          border: 1px solid #000000;
          padding: 18px 21px;
          min-height: (287px - 36px);
          margin: 0 0 9px 0;
          .box_items_inof {
            display: flex;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin-bottom: 13px;

            .title {
              width: 70px;
              text-align: right;
            }

            .contents {
              width: calc(100% - 70px);
              text-align: left;
            }
          }
        }
        .active_one{
          min-height:calc(140px - 36px);
        }
        .box_chang_box{
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #0670DB;
          .line_outer{
            width: 0px;
            height: 16px;
            border-right: 1px solid #000000;
            margin: 0 22px;
          }
        }
        .box_infos:nth-child(4n){
          margin-right: 0;
        }
      }
    }
  }
  .content_box_infos_tabcar {
    width: 301px;
    margin: 0 auto 30px;

    .tab_infos_input {
      margin-bottom: 20px;
      display: flex;
      align-items: center;

      .titles {
        text-align: right;
        width: 80px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }

      input {
        width: 220px;
        height: 30px;
        background: #FFFFFF;
        padding: 0 12px;
        border: 1px solid #C7C7C7;
        box-sizing: border-box;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #C7C7C7;
      }

      textarea {
        width: 220px;
        height: 49px;
        padding: 7px 11px;
        background: #FFFFFF;
        border: 1px solid #C7C7C7;
        box-sizing: border-box;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #C7C7C7;
        resize: none;
      }

      .btns {
        width: 68px;
        height: 30px;
        background: #B11E24;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 30px;
        color: #FFFFFF;
        text-align: center;
      }
    }

    .Tab_cars {
      padding: 17px 20px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      background: #F7F7F7;

      .top {
        display: flex;
        margin-bottom: 10px;
      }
    }
  }

  .city_location_box {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.21);
    left: 0;
    bottom: 0;
    z-index: 8;

    .location_box {
      width: 480px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #9D9D9D;
      padding: 32px 0 30px;
      z-index: 10;
      background: #FFFFFF;

      .tips_title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        margin-bottom: 17px;
        text-align: center;
      }

      .line {
        width: 477px;
        height: 2px;
        background: #E9E9E9;
        box-sizing: border-box;
        margin-bottom: 37px;
      }

      .tips_btn {
        display: flex;
        align-items: center;
        justify-content: center;

        div {
          width: 69px;
          height: 30px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 30px;
          cursor: pointer;
          text-align: center;
        }

        div:nth-child(1) {
          border: 1px solid #C7C7C7;
          color: #9D9D9D;
          box-sizing: border-box;
          margin-right: 10px;
        }

        div:nth-child(2) {
          color: #FFFFFF;
          background: #B11E24;
        }
      }

      .close {
        width: 18px;
        height: 18px;
        position: absolute;
        z-index: 7;
        right: 10px;
        cursor: pointer;
        top: 10px;
      }

      .content_box_infos_tabcar {
        width: 301px;
        margin: 0 auto 30px;

        .tab_infos_input {
          margin-bottom: 20px;
          display: flex;
          align-items: center;

          .titles {
            text-align: right;
            width: 80px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }

          input {
            width: 220px;
            height: 30px;
            background: #FFFFFF;
            padding: 0 12px;
            border: 1px solid #C7C7C7;
            box-sizing: border-box;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #C7C7C7;
          }

          textarea {
            width: 220px;
            height: 49px;
            padding: 7px 11px;
            background: #FFFFFF;
            border: 1px solid #C7C7C7;
            box-sizing: border-box;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #C7C7C7;
            resize: none;
          }

          .btns {
            width: 68px;
            height: 30px;
            background: #B11E24;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 30px;
            color: #FFFFFF;
            text-align: center;
          }
        }

        .Tab_cars {
          padding: 17px 20px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          background: #F7F7F7;

          .top {
            display: flex;
            margin-bottom: 10px;
          }
        }
      }

      .address_tabs {
        width: 323px;

        .tab_infos_input {
          .titles {
            width: 100px;
          }
        }
      }
    }
  }
</style>